import React, { useState, useCallback,useEffect } from "react";
import PropTypes from "prop-types";
import Modal from "antd/lib/modal";
import Checkbox from "antd/lib/checkbox";
import Select from "antd/lib/select";
import Input from "antd/lib/input";
import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
import notification from "@/services/notification";

const { Option } = Select;

function AddWeatherDialog({ dialog, dashboard, widget }) {
  const [widgetOptions, setWidgetOptions] = useState({type:'weather'});
  const weathers = [
    "https://i.tianqi.com/?c=code&a=getcode&id=6&icon=1",
    "https://i.tianqi.com/?c=code&a=getcode&id=7&icon=1",
    "https://i.tianqi.com/?c=code&a=getcode&id=13&icon=1",
    "https://i.tianqi.com/?c=code&a=getcode&id=16&icon=3",
    "https://i.tianqi.com/?c=code&a=getcode&id=34&icon=1",
    "https://i.tianqi.com/?c=code&a=getcode&id=35&icon=1",
    "https://i.tianqi.com/?c=code&a=getcode&id=40&icon=1",
    "https://i.tianqi.com/?c=code&a=getcode&id=48&num=6&icon=1",
    "https://i.tianqi.com/?c=code&a=getcode&id=55&icon=1",
  ]

  useEffect(() => {
    if (widget.options) {
      if (widget.options.widgetOptions) {setWidgetOptions(widget.options.widgetOptions);}
    }
  },[widget]);

  function processChange(key, value) {
    let ps = {...widgetOptions}
    ps[key] = value

    setWidgetOptions(ps);
  }

  const saveWidget = useCallback(() => {
    if (widgetOptions.hasOwnProperty("url")) {
      dialog.close({ widgetOptions }).catch(() => {
        notification.error("天气预报未能添加！");
      });
    } else {
      notification.error("天气预报网址不能为空！");
    }
  }, [dialog, widgetOptions]);

  return (
    <Modal
      {...dialog.props}
      maskClosable = {false}
      title={Object.getOwnPropertyNames(widget).length === 0 ? "添加外部链接" : "编辑外部链接：" + widget.id}
      onOk={saveWidget}
      okButtonProps={{
        ...dialog.props.okButtonProps,
        disabled: dialog.props.okButtonProps.disabled,
      }}
      okText={Object.getOwnPropertyNames(widget).length === 0 ? "添加至报表" : "确定"}
      cancelText="取消"
      width={700}
    >
      <div data-test="AddWidgetDialog">
        天气网站效果：
        <Select style={{ width: 200 }} defaultValue='' onChange={value => processChange("url", weathers[parseInt(value)])}>
          <Option value=''>--请选择--</Option>
          <Option value='0'>竖版经典</Option>
          <Option value='1'>日历+空气</Option>
          <Option value='2'>表格展示</Option>
          <Option value='3'>穿衣温度</Option>
          <Option value='4'>横版经典</Option>
          <Option value='5'>彩色图标</Option>
          <Option value='6'>滚动展示</Option>
          <Option value='7'>六天预报</Option>
          <Option value='8'>竖版指数</Option>
        </Select>
        <br/>
        天气预报网址：
        <Input type="text" style={{width:300}}
          value={(widgetOptions && widgetOptions.url) || ""}
          onChange={e => processChange("url", e.target.value)}
        />        
        <br/>
        <iframe
          title="pop_redash" 
          sandbox="allow-same-origin allow-top-navigation allow-forms allow-scripts allow-popups"
          frameBorder="0"
          width="600px"
          height="200px"
          scrolling="auto"
          src={widgetOptions.url} style={{width:500, height:200}}
        />
      </div>  
      <div>
        <br/>
        部件个性标题：
        <Input type="text" style={{width:300}}
          value={(widgetOptions && widgetOptions.widget_title) || ""}
          title="支持HTML5语法"
          onChange={e => processChange("widget_title", e.target.value)}
        />
        &nbsp;&nbsp;
        <Checkbox
          name="title_center"
          checked={widgetOptions && widgetOptions.title_center}
          onChange={e => processChange("title_center", e.target.checked)}>
          部件标题居中
        </Checkbox>  
        <br/>
        (支持url取数函数)<a href="https://www.dazdata.com/docs/college/markdown/3.html" target="_blank" rel="noopener noreferrer">官网指南</a>；例：&#123;&#123;&quot;parameter&quot;:&quot;id&quot;&#125;&#125;
      </div>  
      <div>
        <br/>
        部件边框样式：
        <Select style={{ width: 200 }} 
          value={widgetOptions && widgetOptions.widget_border}
          onChange={value => processChange("widget_border", value)}>
        <Option value=''>--无边框--</Option>
        <Option value='line'>单线框</Option>
        <Option value='border'>四角加粗</Option>
        <Option value='bold'>线框四角加粗</Option>
        <Option value='middle'>线框四角加粗(标题栏居中)</Option>
        <Option value='cloud'>四角祥云</Option>
        <Option value='linecloud'>线框四角祥云</Option>
        </Select>
        &nbsp;&nbsp;
        <Checkbox
          name="widget_bgtransparent"
          checked={widgetOptions && widgetOptions.widget_bgtransparent}
          onChange={e => processChange("widget_bgtransparent", e.target.checked)}>
          部件背景透明（不应用部件背景样式）
        </Checkbox>  
        <Checkbox
          name="widget_noscroll"
          checked={widgetOptions && widgetOptions.widget_noscroll}
          onChange={e => processChange("widget_noscroll", e.target.checked)}>
          禁止滚动条
        </Checkbox>  
        <Checkbox
          name="widget_nomenu"
          checked={widgetOptions && widgetOptions.widget_nomenu}
          onChange={e => processChange("widget_nomenu", e.target.checked)}>
          禁止菜单(Portal模式)
        </Checkbox>  
      </div>  
      {/* <div>
        <br/>
        <Checkbox
          name="hide_scrolling"
          checked={widgetOptions && widgetOptions.hide_scrolling}
          onChange={e => processChange("hide_scrolling", e.target.checked)}>
          隐藏内容滚动条
        </Checkbox>  
      </div> */}
      <div>
        <br/>
        <Checkbox
          name="no_refresh"
          checked={widgetOptions && widgetOptions.no_refresh}
          onChange={e => processChange("no_refresh", e.target.checked)}>
          不随报表自动刷新
        </Checkbox>  
        &nbsp;&nbsp;
        <Checkbox
          name="mainWidget"
          checked={widgetOptions && widgetOptions.mainWidget}
          onChange={e => processChange("mainWidget", e.target.checked)}>
          设置为主部件
        </Checkbox>  
        (Portal模式充满报表背景区)
        <Checkbox
          name="widget_toplayer"
          checked={widgetOptions && widgetOptions.widget_toplayer}
          disabled={widgetOptions && widgetOptions.mainWidget}
          onChange={e => processChange("widget_toplayer", e.target.checked)}>
          置于顶层
        </Checkbox>  
      </div>  
    </Modal>
  );
}

AddWeatherDialog.propTypes = {
  dialog: DialogPropType.isRequired,
  widget: PropTypes.object,
};

AddWeatherDialog.defaultProps = {
  widget: {},
};

export default wrapDialog(AddWeatherDialog);
